<template>
  <div class="page">
    <div class="goback" @click="goback">
      <svg t="1754026822485" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9180" width="40" height="40"><path d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z" fill="" p-id="9181"></path></svg>
    </div>
    <div class="content">
      <div class="contentleft">
        <div class="lbt">
          <!-- 轮播图 -->
          <div v-if="carouselImages.length === 0" class="carousel-loading">
            <div class="loading-spinner"></div>
            <p>图片加载中...</p>
          </div>
          <el-carousel 
            v-else
            height="600px" 
            indicator-position="outside" 
            arrow="always"
            v-model="currentIndex"
            @change="handleCarouselChange"
          >
            <el-carousel-item v-for="(image, index) in carouselImages" :key="index">
              <img :src="image.url" :alt="image.alt" class="carousel-image" @load="onImageLoad" @error="onImageError">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="lbtphoto">
          <img 
            v-for="(image, index) in carouselImages" 
            :key="index"
            :src="image.url" 
            :alt="image.alt" 
            class="thumbnail-image"
            :class="{ active: currentIndex === index }"
            @click="currentIndex = index"
          >
        </div>
      </div>
      <div class="contentright">
        <div class="up">
          <div class="up1">
            <span class="tag tag-primary">全程追溯级</span>
          </div>
          <StarVue :rating="grade" />
          <div class="up2">
            产品名称：{{archiveData?.cropName || '加载中...'}}
          </div>
          <div class="up3">
            <div class="up3div">
              <svg t="1753795225883" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="48568" width="16" height="16"><path d="M748.307692 55.138462c7.876923 7.876923 7.876923 15.753846 15.753846 23.630769l31.507693 149.661538 149.661538 31.507693c39.384615 7.876923 70.892308 47.261538 63.015385 94.523076 0 7.876923-7.876923 15.753846-7.876923 23.63077l-86.646154 133.907692 86.646154 133.907692c23.630769 39.384615 15.753846 86.646154-23.630769 110.276923-7.876923 7.876923-15.753846 7.876923-23.63077 7.876923l-149.661538 31.507693-39.384616 149.661538c-7.876923 39.384615-47.261538 70.892308-94.523076 63.015385-7.876923 0-15.753846-7.876923-23.63077-7.876923l-133.907692-86.646154-133.907692 86.646154c-39.384615 23.630769-86.646154 15.753846-110.276923-23.630769-7.876923-7.876923-7.876923-15.753846-7.876923-23.63077l-31.507693-149.661538L78.769231 764.061538C31.507692 756.184615 7.876923 708.923077 15.753846 669.538462c0-7.876923 7.876923-15.753846 7.876923-23.63077l86.646154-133.907692-78.769231-133.907692c-23.630769-31.507692-15.753846-78.769231 23.63077-102.4 7.876923-7.876923 15.753846-7.876923 23.630769-15.753846l149.661538-31.507693 31.507693-149.661538C267.815385 31.507692 315.076923 7.876923 354.461538 15.753846c7.876923 0 15.753846 7.876923 23.63077 7.876923l133.907692 86.646154L645.907692 23.630769c31.507692-15.753846 78.769231-7.876923 102.4 31.507693zM653.784615 401.723077L433.230769 614.4 330.830769 519.876923l-39.384615 39.384615 141.784615 141.784616 39.384616-47.261539 220.553846-220.553846-39.384616-31.507692z" fill="#2e7d32" p-id="48569"></path></svg>
              无污染
            </div>
            <div class="up3div">
              <svg t="1753795225883" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="48568" width="16" height="16"><path d="M748.307692 55.138462c7.876923 7.876923 7.876923 15.753846 15.753846 23.630769l31.507693 149.661538 149.661538 31.507693c39.384615 7.876923 70.892308 47.261538 63.015385 94.523076 0 7.876923-7.876923 15.753846-7.876923 23.63077l-86.646154 133.907692 86.646154 133.907692c23.630769 39.384615 15.753846 86.646154-23.630769 110.276923-7.876923 7.876923-15.753846 7.876923-23.63077 7.876923l-149.661538 31.507693-39.384616 149.661538c-7.876923 39.384615-47.261538 70.892308-94.523076 63.015385-7.876923 0-15.753846-7.876923-23.63077-7.876923l-133.907692-86.646154-133.907692 86.646154c-39.384615 23.630769-86.646154 15.753846-110.276923-23.630769-7.876923-7.876923-7.876923-15.753846-7.876923-23.63077l-31.507693-149.661538L78.769231 764.061538C31.507692 756.184615 7.876923 708.923077 15.753846 669.538462c0-7.876923 7.876923-15.753846 7.876923-23.63077l86.646154-133.907692-78.769231-133.907692c-23.630769-31.507692-15.753846-78.769231 23.63077-102.4 7.876923-7.876923 15.753846-7.876923 23.630769-15.753846l149.661538-31.507693 31.507693-149.661538C267.815385 31.507692 315.076923 7.876923 354.461538 15.753846c7.876923 0 15.753846 7.876923 23.63077 7.876923l133.907692 86.646154L645.907692 23.630769c31.507692-15.753846 78.769231-7.876923 102.4 31.507693zM653.784615 401.723077L433.230769 614.4 330.830769 519.876923l-39.384615 39.384615 141.784615 141.784616 39.384616-47.261539 220.553846-220.553846-39.384616-31.507692z" fill="#2e7d32" p-id="48569"></path></svg>
              天然成分
            </div>
            <div class="up3div">
              <svg t="1753795225883" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="48568" width="16" height="16"><path d="M748.307692 55.138462c7.876923 7.876923 7.876923 15.753846 15.753846 23.630769l31.507693 149.661538 149.661538 31.507693c39.384615 7.876923 70.892308 47.261538 63.015385 94.523076 0 7.876923-7.876923 15.753846-7.876923 23.63077l-86.646154 133.907692 86.646154 133.907692c23.630769 39.384615 15.753846 86.646154-23.630769 110.276923-7.876923 7.876923-15.753846 7.876923-23.63077 7.876923l-149.661538 31.507693-39.384616 149.661538c-7.876923 39.384615-47.261538 70.892308-94.523076 63.015385-7.876923 0-15.753846-7.876923-23.63077-7.876923l-133.907692-86.646154-133.907692 86.646154c-39.384615 23.630769-86.646154 15.753846-110.276923-23.630769-7.876923-7.876923-7.876923-15.753846-7.876923-23.63077l-31.507693-149.661538L78.769231 764.061538C31.507692 756.184615 7.876923 708.923077 15.753846 669.538462c0-7.876923 7.876923-15.753846 7.876923-23.63077l86.646154-133.907692-78.769231-133.907692c-23.630769-31.507692-15.753846-78.769231 23.63077-102.4 7.876923-7.876923 15.753846-7.876923 23.630769-15.753846l149.661538-31.507693 31.507693-149.661538C267.815385 31.507692 315.076923 7.876923 354.461538 15.753846c7.876923 0 15.753846 7.876923 23.63077 7.876923l133.907692 86.646154L645.907692 23.630769c31.507692-15.753846 78.769231-7.876923 102.4 31.507693zM653.784615 401.723077L433.230769 614.4 330.830769 519.876923l-39.384615 39.384615 141.784615 141.784616 39.384616-47.261539 220.553846-220.553846-39.384616-31.507692z" fill="#2e7d32" p-id="48569"></path></svg>
              有机认证
            </div>
            <div class="up3div">
              <svg t="1753795225883" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="48568" width="16" height="16"><path d="M748.307692 55.138462c7.876923 7.876923 7.876923 15.753846 15.753846 23.630769l31.507693 149.661538 149.661538 31.507693c39.384615 7.876923 70.892308 47.261538 63.015385 94.523076 0 7.876923-7.876923 15.753846-7.876923 23.63077l-86.646154 133.907692 86.646154 133.907692c23.630769 39.384615 15.753846 86.646154-23.630769 110.276923-7.876923 7.876923-15.753846 7.876923-23.63077 7.876923l-149.661538 31.507693-39.384616 149.661538c-7.876923 39.384615-47.261538 70.892308-94.523076 63.015385-7.876923 0-15.753846-7.876923-23.63077-7.876923l-133.907692-86.646154-133.907692 86.646154c-39.384615 23.630769-86.646154 15.753846-110.276923-23.630769-7.876923-7.876923-7.876923-15.753846-7.876923-23.63077l-31.507693-149.661538L78.769231 764.061538C31.507692 756.184615 7.876923 708.923077 15.753846 669.538462c0-7.876923 7.876923-15.753846 7.876923-23.63077l86.646154-133.907692-78.769231-133.907692c-23.630769-31.507692-15.753846-78.769231 23.63077-102.4 7.876923-7.876923 15.753846-7.876923 23.630769-15.753846l149.661538-31.507693 31.507693-149.661538C267.815385 31.507692 315.076923 7.876923 354.461538 15.753846c7.876923 0 15.753846 7.876923 23.63077 7.876923l133.907692 86.646154L645.907692 23.630769c31.507692-15.753846 78.769231-7.876923 102.4 31.507693zM653.784615 401.723077L433.230769 614.4 330.830769 519.876923l-39.384615 39.384615 141.784615 141.784616 39.384616-47.261539 220.553846-220.553846-39.384616-31.507692z" fill="#2e7d32" p-id="48569"></path></svg>
              无机认证
            </div>
          </div>
        </div>
        <div class="down">
          <div v-if="archiveData" class="data-section">
            <p><strong>产地:</strong> {{ areaData.areaName }}</p>
            <p><strong>产地地址:</strong> {{ areaData.areaAddress }}</p>
            <p><strong>负责人:</strong> {{ areaData.responsiblePerson }}</p>
            <p><strong>零售价格:</strong> {{ archiveData.suggestedRetailPrice }}</p>
            <p><strong>溯源码:</strong> {{ archiveData.traceabilityCode }}</p>
            <p><strong>上架时间:</strong> {{ archiveData.updateTime }}</p>
          </div>
          
          <div v-if="!archiveData && !productData.length && !areaData && !userData" class="no-data">
            <p>暂无数据</p>
          </div>
          
          <!-- 电话号码模态框 -->
          <div v-if="showPhoneModal" class="modal-overlay" @click="showPhoneModal = false">
            <div class="modal-content" @click.stop>
              <div class="modal-header">
                <h3>联系电话</h3>
                <button class="close-btn" @click="showPhoneModal = false">&times;</button>
              </div>
              <div class="modal-body">
                <div class="phone-icon">
                  <svg t="1754053934571" class="icon" viewBox="0 0 1755 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13857" width="48" height="48">
                    <path d="M758.8864 633.281829c91.092114 90.428343 196.534857 176.811886 237.928229 135.100342 59.271314-59.6992 95.749486-111.643429 227.271314-6.756571 131.521829 104.943543 31.0784 175.562971-26.327772 233.4208-66.243657 66.742857-314.357029 4.672-560.285257-239.392914-245.922743-244.1216-309.880686-491.7504-243.587657-558.528 57.422629-57.850514 127.294171-158.800457 233.150172-28.042972 105.899886 130.691657 54.242743 167.570286-5.028572 227.293257-41.378743 41.691429 45.770971 146.463086 136.879543 236.906058z" fill="#2e7d32" p-id="13858"></path>
                  </svg>
                </div>
                <p class="phone-number">{{ (userData && userData.phonenumber) || '暂无电话信息' }}</p>
                <p class="phone-tip">请拨打以下号码联系商家</p>
              </div>
              <div class="modal-footer">
                <button class="btn-primary" @click="showPhoneModal = false">确定</button>
              </div>
            </div>
          </div>
          
          <!-- 微信号模态框 -->
          <div v-if="showWechatModal" class="modal-overlay" @click="showWechatModal = false">
            <div class="modal-content" @click.stop>
              <div class="modal-header">
                <h3>微信号</h3>
                <button class="close-btn" @click="showWechatModal = false">&times;</button>
              </div>
              <div class="modal-body">
                <div class="wechat-icon">
                  <svg t="1754053848613" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10249" width="48" height="48">
                    <path d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z" fill="#07C160" p-id="10250"></path>
                  </svg>
                </div>
                <p class="wechat-number">{{ (userData && userData.wechatNumber) || '暂无微信号信息' }}</p>
                <p class="wechat-tip">请添加以下微信号联系商家</p>
              </div>
              <div class="modal-footer">
                <button class="btn-primary" @click="showWechatModal = false">确定</button>
              </div>
            </div>
          </div>
          <div class="middle">
          <div @click="showWechatNumber" style="cursor: pointer;">
            <svg t="1754053848613" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10249" width="20" height="20"><path d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z" fill="#ffffff" p-id="10250"></path></svg>
            加微信
          </div>
          <div>
            |
          </div>
          <div @click="showPhoneModal = true" style="cursor: pointer;">
            <svg t="1754053934571" class="icon" viewBox="0 0 1755 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13857" width="20" height="20"><path d="M758.8864 633.281829c91.092114 90.428343 196.534857 176.811886 237.928229 135.100342 59.271314-59.6992 95.749486-111.643429 227.271314-6.756571 131.521829 104.943543 31.0784 175.562971-26.327772 233.4208-66.243657 66.742857-314.357029 4.672-560.285257-239.392914-245.922743-244.1216-309.880686-491.7504-243.587657-558.528 57.422629-57.850514 127.294171-158.800457 233.150172-28.042972 105.899886 130.691657 54.242743 167.570286-5.028572 227.293257-41.378743 41.691429 45.770971 146.463086 136.879543 236.906058z" fill="#ffffff" p-id="13858"></path><path d="M1015.338057 516.639086c20.136229 0 38.014171-14.383543 41.771886-34.876343 7.122286-38.816914-1.314743-78.101943-23.729372-110.601143-22.436571-32.469943-56.164571-54.306743-94.992457-61.407086-23.135086-4.220343-45.242514 11.064686-49.472 34.157715-4.242286 23.109486 11.057371 45.264457 34.157715 49.481142 16.4864 3.026286 30.807771 12.291657 40.321828 26.091886 9.536 13.765486 13.1072 30.4512 10.0992 46.9504-4.256914 23.102171 11.035429 45.2352 34.135772 49.481143 2.578286 0.471771 5.178514 0.722286 7.707428 0.722286z" fill="#ffffff" p-id="13859"></path><path d="M1159.008914 513.567086c20.1216 0 37.992229-14.339657 41.742629-34.839772 25.835886-140.831086-67.713829-276.394057-208.543086-302.208-23.029029-4.214857-45.242514 11.072-49.472 34.165029-4.242286 23.063771 11.057371 45.227886 34.135772 49.442743 94.7072 17.371429 157.621029 108.547657 140.2496 203.247543-4.229486 23.100343 11.072 45.264457 34.165028 49.473828 2.550857 0.480914 5.129143 0.713143 7.722057 0.718629z" fill="#ffffff" p-id="13860"></path><path d="M1323.565714 559.989029c20.1216 0 37.999543-14.343314 41.764572-34.847086 21.485714-117.152914-3.9424-235.646171-71.606857-333.6576-67.6352-98.0224-169.400686-163.821714-286.557258-185.300114-23.049143-4.214857-45.227886 11.057371-49.472 34.1632-4.242286 23.093029 11.057371 45.220571 34.157715 49.472 94.785829 17.371429 177.150171 70.628571 231.914057 149.950171 54.736457 79.350857 75.3152 175.250286 57.943771 270.058057-4.229486 23.0656 11.042743 45.218743 34.1504 49.475657 2.583771 0.482743 5.163886 0.685714 7.7056 0.685715z" fill="#ffffff" p-id="13861"></path></svg>
            电话订货
          </div>
        </div>
        </div>
        
        
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import StarVue from '@/components/ncpsy/tradingfloor/tfpage2/StarVue.vue'
import { getArchive } from '@/api/ncpsy/management/archive.js'
import { getArea } from '@/api/ncpsy/management/area.js'
import { getProduct } from '@/api/ncpsy/management/product.js'
import { getUser } from '@/api/system/user.js'

// ===== 路由相关 =====
const router = useRouter()
const route = useRoute()

// ===== 响应式数据 =====
// 接收的参数
const primaryId = ref('')

// 数据存储
const archiveData = ref(null)
const productData = ref([])
const areaData = ref(null)
const userData = ref(null)
// 产品评分
const grade = ref(4.3)

// 模态框状态
const showPhoneModal = ref(false)
const showWechatModal = ref(false)

// 轮播图相关
const currentIndex = ref(0)
const carouselImages = ref([])

// 处理图片URL字符串，转换为轮播图格式
const processCropImages = () => {
  if (!archiveData.value || !archiveData.value.cropImage) {
    // 如果没有图片数据，使用默认图片
    carouselImages.value = [
      { url: new URL('@/assets/ncpsy/chandi1.png', import.meta.url).href, alt: '产地图片1' },
      { url: new URL('@/assets/ncpsy/chandi2.png', import.meta.url).href, alt: '产地图片2' },
      { url: new URL('@/assets/ncpsy/chandi3.png', import.meta.url).href, alt: '产地图片3' },
      { url: new URL('@/assets/ncpsy/chandi4.png', import.meta.url).href, alt: '产地图片4' }
    ]
    return
  }
  
  // 将逗号分隔的图片URL字符串转换为数组
  const imageUrls = archiveData.value.cropImage.split(',').filter(url => url.trim())
  
  // 转换为轮播图所需的格式
  carouselImages.value = imageUrls.map((url, index) => ({
    url: url.trim(),
    alt: `产品图片${index + 1}`
  }))
  
  // 如果处理后的图片数组为空，使用默认图片
  if (carouselImages.value.length === 0) {
    carouselImages.value = [
      { url: new URL('@/assets/ncpsy/chandi1.png', import.meta.url).href, alt: '产地图片1' },
      { url: new URL('@/assets/ncpsy/chandi2.png', import.meta.url).href, alt: '产地图片2' },
      { url: new URL('@/assets/ncpsy/chandi3.png', import.meta.url).href, alt: '产地图片3' },
      { url: new URL('@/assets/ncpsy/chandi4.png', import.meta.url).href, alt: '产地图片4' }
    ]
  }
  
  // 预加载图片
  preloadImages()
}

// 预加载图片
const preloadImages = () => {
  carouselImages.value.forEach(image => {
    const img = new Image()
    img.src = image.url
  })
}

// 图片加载成功处理
const onImageLoad = (event) => {
  console.log('图片加载成功:', event.target.src)
}

// 图片加载失败处理
const onImageError = (event) => {
  console.error('图片加载失败:', event.target.src)
  // 可以设置默认图片替代
  event.target.src = new URL('@/assets/ncpsy/chandi1.png', import.meta.url).href
}

// ===== 方法函数 =====
// 获取产品数据
const fetchProduct = async () => {
  try {
    if (!archiveData.value || !archiveData.value.cropId) {
      console.log('档案数据不完整，跳过产品数据获取')
      return null
    }
    console.log('开始获取产品数据，archiveData.cropId:', archiveData.value.cropId)
    const response = await getProduct(archiveData.value.cropId)
    productData.value = response.data
    console.log('获取产品数据成功:', response.data)
    
    // 产品数据获取成功后，获取区域数据
    if (productData.value && productData.value.areaId) {
      console.log('产品数据获取成功，准备获取区域数据，areaId:', productData.value.areaId)
      await fetchArea(productData.value.areaId)
    } else {
      console.log('产品数据中没有areaId，跳过区域数据获取')
    }
    
    return response
  } catch (error) {
    console.error('获取产品数据失败:', error)
    throw error
  }
}

// 获取区域数据
const fetchArea = async (areaId) => {
  try {
    console.log('开始获取区域数据，areaId:', areaId)
    const response = await getArea(areaId)
    areaData.value = response.data
    console.log('获取区域数据成功:', response.data)
    return response
  } catch (error) {
    console.error('获取区域数据失败:', error)
    throw error
  }
}

// 获取用户数据
const fetchUser = async (userId) => {
  try {
    console.log('开始获取用户数据，userId:', userId)
    const response = await getUser(userId)
    userData.value = response.data
    console.log('获取用户数据成功:', response.data)
    return response
  } catch (error) {
    console.error('获取用户数据失败:', error)
    throw error
  }
}

// 获取档案数据（主函数）
const fetchArchive = async () => {
  try {
    console.log('开始获取档案数据，primaryId:', primaryId.value)
    const response = await getArchive(primaryId.value)
    archiveData.value = response.data
    console.log('获取档案数据成功:', response.data)
    console.log('获取档案个人ID数据成功:', response.data.userId)

    // 处理图片URL
    processCropImages()
    
    // 获取档案数据成功后，获取用户数据
    if (response.data && response.data.userId) {
      console.log('档案数据获取成功，准备获取用户数据...')
      await fetchUser(response.data.userId)
    } else {
      console.log('档案数据中没有userId，跳过用户数据获取')
    }
    
    // 获取档案数据成功后，获取产品数据
    if (response.data && response.data.cropId) {
      console.log('档案数据获取成功，准备获取产品数据...')
      await fetchProduct()
    } else {
      console.log('档案数据中没有cropId，跳过产品数据获取')
    }
    
    return response
  } catch (error) {
    console.error('获取档案数据失败:', error)
    throw error
  }
}

// 轮播图切换事件
const handleCarouselChange = (index) => {
  currentIndex.value = index
}

// 返回上一页
const goback = () => {
  router.replace({ name: 'TFPage1' })
}

// 显示微信号
const showWechatNumber = () => {
  showWechatModal.value = true
}

// ===== 生命周期 =====
// 组件挂载时获取参数并获取档案数据
onMounted(async () => {
  primaryId.value = route.query.primary_id || ''
  console.log('接收到的 primary_id:', primaryId.value)
  
  // 如果有primaryId，则获取档案数据
  if (primaryId.value) {
    console.log('准备获取档案数据...')
    await fetchArchive()
  } else {
    console.log('没有接收到primaryId，跳过档案数据获取')
  }
})
</script>

<style scoped>
.page{
  min-height: 100vh;
  padding: 0 50px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e8f5e9 100%);
  display: flex;
  flex-direction: column;
  justify-content: start;
  position: relative;
  overflow: hidden;
}

/* 内容区域样式 */
.content {
  position: relative;
  z-index: 1;
  padding: 30px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  height: calc(100vh - 60px); /* 减去上下padding */
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  width: 420px;
  max-width: 90%;
  overflow: hidden;
  animation: modalFadeIn 0.3s ease-out;
  margin: auto;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.modal-header h3 {
  margin: 0;
  color: #2e7d32;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  flex: 1;
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.close-btn:hover {
  background-color: #f0f0f0;
  color: #333;
}

.modal-body {
  padding: 40px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.phone-icon {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.phone-icon .icon {
  display: inline-block;
}

.wechat-icon {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wechat-icon .icon {
  display: inline-block;
}

.wechat-number {
  font-size: 28px;
  font-weight: 600;
  color: #07C160;
  margin: 0 0 12px 0;
  letter-spacing: 1px;
  line-height: 1.4;
}

.wechat-tip {
  color: #666;
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

.phone-number {
  font-size: 28px;
  font-weight: 600;
  color: #07C160;
  margin: 0 0 12px 0;
  letter-spacing: 1px;
  line-height: 1.4;
}

.phone-tip {
  color: #666;
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

.modal-footer {
  padding: 20px 28px;
  background-color: #f8f9fa;
  border-top: 1px solid #e9ecef;
  text-align: center;
}

.btn-primary {
  background-color: #2e7d32;
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
}

.btn-primary:hover {
  background-color: #1b5e20;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}
.goback{
  height: 20px;
  text-align: left;
}
/* 初始状态 - 绿色箭头 */
.goback .icon path {
  fill: #888888;
}
.goback:hover .icon path {
  fill: #2e7d32;
}

.content{
  padding-bottom: 50px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}

/* 左侧内容区域 */
.contentleft{
  width: 60%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  padding: 20px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  overflow: hidden;
}

.contentleft:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.lbt{
  width: 100%;
  height: 70%;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

/* 轮播图加载状态样式 */
.carousel-loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f5f5f5;
  border-radius: 12px;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(46, 125, 50, 0.1);
  border-top: 4px solid #2e7d32;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.carousel-loading p {
  color: #666;
  font-size: 16px;
  margin: 0;
}

/* 轮播图样式优化 */
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.carousel-image:hover {
  transform: scale(1.02);
}

/* Element Plus 轮播组件样式覆盖 */
:deep(.el-carousel__container) {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.el-carousel__item) {
  background-color: #f5f5f5;
}

:deep(.el-carousel__indicators) {
  transform: translateY(20px);
}

:deep(.el-carousel__indicator) {
  padding: 8px 6px;
}

:deep(.el-carousel__indicator--horizontal .el-carousel__button) {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: all 0.3s ease;
}

:deep(.el-carousel__indicator--horizontal.is-active .el-carousel__button) {
  background-color: #2e7d32;
  width: 24px;
  border-radius: 6px;
}

/* 数据展示区域样式 */
.data-section {
  margin: 20px 0;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #2e7d32;
}

.data-section h3 {
  color: #2e7d32;
  margin-bottom: 10px;
  font-size: 16px;
}

.data-section p {
  margin: 5px 0;
  color: #666;
  line-height: 1.5;
}

.data-section strong {
  color: #333;
}

.product-item {
  margin: 10px 0;
  padding: 10px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.no-data {
  text-align: center;
  color: #999;
  padding: 20px;
}
.lbtphoto{
  width: 100%;
  height: 25%;
  display: flex;
  justify-content: start;
  align-items: center;
  overflow-y: hidden;
  overflow-x: auto;
  scrollbar-width: none;  /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none;  /* IE/Edge 隐藏滚动条 */
  flex-shrink: 0;
  margin-top: 10px;
}
/* Chrome/Safari/Opera 隐藏滚动条 */
.lbtphoto::-webkit-scrollbar {
    display: none;
}
.lbtphoto img{
  width: 180px;
  height: 120px;
  margin: 0 5px;
}

/* 缩略图样式优化 */
.thumbnail-image {
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 8px;
  transition: all 0.3s ease;
  opacity: 0.8;
}

.thumbnail-image:hover {
  border-color: #2e7d32;
  transform: scale(1.05) translateY(-2px);
  opacity: 0.9;
}

.thumbnail-image.active {
  border-color: #2e7d32;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
  opacity: 1;
}



/* 右侧内容区域 */
.contentright{
  width: 40%;
  height: 100%;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow: hidden;
}

.contentright:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.up{
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.up1{
  display: flex;
  align-items: center;
  gap: 20px; /* 两个标签的间距 */
}

/* 通用标签样式 */
.tag {
  width: 140px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 10px;
  font-size: 18px;
  line-height: 30px;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.15);
  transition: all 0.3s ease;
}

.tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.25);
}

/* 标签前置圆点（核心实现） */
.tag::before {
  content: "·";
  margin-right: 5px;
  font-size: 24px; /* 圆点大小 */
}

/* 绿色标签 */
.tag-primary {
  background-color: #2e7d32; /* 深绿色 */
  color: #fff;
}

/* 白色边框标签 */
.tag-default {
  background-color: #e5e7eb;
  color: #2e7d32;
}

.up2{
  font-size: 32px;
  text-align: left;
  font-weight: 600;
  color: #333;
  margin: 5px 0;
}

.up3{
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  gap: 15px;
}

.up3div{
  width: 130px;
  height: 40px;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  color: #2e7d32;
  background: rgba(46, 125, 50, 0.05);
  border-radius: 8px;
  padding: 0 8px;
  transition: all 0.3s ease;
}

.up3div:hover {
  background: rgba(46, 125, 50, 0.1);
  transform: translateY(-2px);
}

.middle{
  height: 60px;
  border-radius: 15px;
  background-color: #2e7d32;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.middle:hover {
  background-color: #1b5e20;
  box-shadow: 0 6px 20px rgba(46, 125, 50, 0.4);
}

.middle>div{
  text-align: center;
  width: 180px;
  line-height: 60px;
  font-size: 20px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.middle>div:hover {
  transform: scale(1.05);
}

.down{
  background: rgba(248, 249, 250, 0.8);
  border-radius: 12px;
  padding: 15px;
  flex-grow: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow-y: auto;
}

.down p{
  padding: 8px 15px;
  font-size: 18px;
  line-height: 30px;
  text-align: left;
  color: #333;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.down p:last-child {
  border-bottom: none;
}

.down strong {
  color: #2e7d32;
  font-weight: 600;
}

</style>